<%@ page contentType="text/html;charset=UTF-8"%>
<style type="text/css">
body{
    font-family:Arial, Helvetica, sans-serif;
    margin:10px;
}
/*
custom style for extruder
*/
.extruder.left.a .flap{
    font-size:18px;
    color:white;
    top:0;
    padding:10px 0 10px 10px;
    background:#772B14;
    width:30px;
    position:absolute;
    right:0;
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-box-shadow:#666 2px 0px 3px;
    -webkit-box-shadow:#666 2px 0px 3px;
}
.extruder.left.a .content{
    border-right:3px solid #772B14;
}
.extruder.left.a .flap .flapLabel{
    background:#772B14;
}
</style>
<link href="${ctxStatic }/jquery.mb.extruder/css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctxStatic }/jquery.mb.extruder/inc/jquery.hoverIntent.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/jquery.mb.extruder/inc/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="${ctxStatic }/jquery.mb.extruder/inc/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
    $("#extruderMenu").buildMbExtruder({
        position:"left",
        width:270,
        top:"40%",
        extruderOpacity:.8,
        onExtOpen:function(){
        	$("#extruderMenu").changeLabel("关闭系统菜单");
        },
        onExtContentLoad:function(){
        	
        },
        onExtClose:function(){
        	$("#extruderMenu").changeLabel("打开系统菜单");
        }
    });
    
    $.fn.changeLabel=function(text){
        $(this).find(".flapLabel").html(text);
        $(this).find(".flapLabel").mbFlipText();
    };
});
</script>
<div id="extruderMenu" class="a {title:'打开系统菜单', url:'${ctx }/sys/menu/mobile'}"></div>